<template>

  <div>
    <!--<p>我的</p>-->
    <div id="listDetial" v-if="xinjianWrap">
      <div class="addressList">
        <div class="addressInfor">
          <p class="addressContent" v-show="showContent"><span class="first">{{firstname}}</span><span class="second">{{secondname}}</span><span class="three">{{threename}}</span>
          </p>
        </div>
        <!--一级地址-->
        <ul class="firstAddress" v-show="one">
          <li v-for="(item,index) in arrAddress[0]" @click="jumpTwo(index)" ref="menuItem">{{item.area_name}}<span class="addressId" style="display: none" ref="menuItemid">{{item.id}}</span></li>
        </ul>
        <!--二级地址-->
        <ul class="secondAddress" v-show="two">
          <li v-for="(item,index) in arrAddress2[0]" @click="jumpThree(index)" ref="menuItemthree">{{item.area_name}}<span class="addressIdsecond" style="display: none"ref="menuItemthree2" >{{item.id}}</span></li>
        </ul>
        <!--三级地址-->
        <ul class="thirdAddress" v-show="three">
          <li v-for="(item,index) in arrAddress3[0]" @click="jumpfinish(index)" ref="menuItemthree3">{{item.area_name}}<span class="addressIdsecond" style="display: none"ref="menuItemthree33" >{{item.id}}</span></li>
        </ul>
      </div>
    </div>

  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    name: 'fourth',

    data() {
      return {
        AuthTokenThree: '',
        xinjianshow: true,
        xinjianWrap: true,
        one: true,
        two: false,
        three: false,
        showContent: true,
        arrAddress: [],
        arrAddress2: [],
        arrAddress3: [],
        firstname: '',
        secondname: '',
        threename: '',
        area_name: "",
        id: "",
        ider: '',
        parent_id: '',
        secondid: '',
        addressName: '',
        phoneNum: '',
        suozaidiqu: "",
        xiangxiAddress: '',
        tishi: false,
        time: 2000,
        warnMessage: '',
        aaa:this.$route.query.names,
        bbb:this.$route.query.nums
      }
    },
    // 页面加载时展示省级菜单
    created() {
      var that = this;
      that.AuthTokenThree = sessionStorage.getItem('AuthToken');
      console.log(that.AuthTokenThree);
      axios.get('http://test.zjapi.xianxiangle.com/province?AuthToken=' + that.AuthTokenThree,).then           (function (res) {
        console.log(res.data.data);
        that.arrAddress.push(res.data.data);
      }).catch(function (err) {

      })
    },
    methods: {

      // 跳转获取市级菜单
      jumpTwo(index) {
        var that = this;
        that.one = false;
        that.two = true;
        that.three = false;
        that.firstname = that.$refs.menuItem[index].innerText;
        // 一级id
        that.id = that.$refs.menuItemid[index].innerText;
        console.log(that.firstname);
        console.log(that.id);
        // console.log(that.id)
        axios.get('http://test.zjapi.xianxiangle.com/area?AuthToken=' + that.AuthTokenThree + '&area_id=' + that.id,).then(function (res) {
          console.log(res.data.data);
          that.arrAddress2.push(res.data.data);
          console.log(that.arrAddress2)
        }).catch(function (err) {
        })
      },
      jumpThree(index) {
        var that = this;
        that.one = false;
        that.two = false;
        that.three = true;
        that.secondname = that.$refs.menuItemthree[index].innerText;
        // 二级id
        that.ider = that.$refs.menuItemthree2[index].innerText;
        console.log(that.secondname);
        console.log(that.ider);
        // console.log(that.id)
        axios.get('http://test.zjapi.xianxiangle.com/area?AuthToken=' + that.AuthTokenThree + '&area_id=' + that.ider,).then(function (res) {
          console.log(res.data.data);
          that.arrAddress3.push(res.data.data);
          console.log(that.arrAddress3)
        }).catch(function (err) {
        })
      },
      // 获取三级地址
      jumpfinish(index) {
        var that = this;
        that.one = false;
        that.two = false;
        that.three = false;
        that.threename = that.$refs.menuItemthree3[index].innerText;
        // 三级id
        that.idsan = that.$refs.menuItemthree33[index].innerText;
        console.log(that.threename);
        console.log(that.idsan);
        // console.log(that.id)
        axios.get('http://test.zjapi.xianxiangle.com/area?AuthToken=' + that.AuthTokenThree + '&area_id=' + that.idsan,).then(function (res) {
          console.log(res.data.data);
          that.arrAddress3.push(res.data.data);
          console.log(that.arrAddress3)
          that.showContent = false;
          that.$router.go(-1)
          that.$router.push({path:'/five',query:{firstname:that.firstname,secondname:that.secondname,threename:that.threename,id:that.id,ider:that.ider,idsan:that.idsan,aaa:that.aaa,bbb:that.bbb}})

          // sessionStorage.setItem('threename',that.threename)
          // that.suozaidiqu = that.firstname + that.secondname + that.threename
        }).catch(function (err) {
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  #listDetial {
    width: 100%;
    margin: auto;
    overflow: hidden;
    //display: none;
    header {
      width: 100%;
      height: 3rem;
      line-height: 3rem;
      //border: 1px solid;
      display: flex;
      justify-content: space-between;
      background: white;
      padding: 1rem;
      img {
        width: 2rem;
        height: 1.8rem;
      }
      p:nth-child(1) {
        //font-weight: 700;
        color: #666666;
        font-size: 2rem;
        span {
          font-size: 2rem;
          position: relative;
          left: 0.5rem;
          bottom: 0.2rem;
        }
      }
      p:nth-child(2) {
        font-size: 2.2rem;
        position: relative;
        right: 2rem;
      }
    }

    //地址信息
    .addressList {
      width: 100%;
      background: white;
      margin: auto;
      //margin-top: 1rem;
      //一级地址
      .addressInfor {
        width: 100%;
        background: #eeeeee;
        border-top: 1px solid #cccccc;
        margin: auto;
        //display: none;
        p {
          width: 90%;
          margin: auto;
          height: 5rem;
          line-height: 5rem;
          //border: 1px solid;
          font-size: 1.6rem;
        }

      }
      .firstAddress {
        width: 100%;
        margin: auto;
        border-top: 1px solid #cccccc;
        list-style: none;
        li {
          width: 90%;
          height: 5rem;
          line-height: 5rem;
          font-size: 1.6rem;
          //border: 1px solid;
          text-align: left;
          border-bottom: 1px solid #cccccc;
          margin: auto;
        }
      }
      //二级地址
      .secondAddress {
        width: 100%;
        margin: auto;
        border-top: 1px solid #cccccc;
        list-style: none;
        /*display: none;*/
        li {
          width: 90%;
          height: 5rem;
          line-height: 5rem;
          font-size: 1.6rem;
          //border: 1px solid;
          text-align: left;
          border-bottom: 1px solid #cccccc;
          margin: auto;
        }
      }

      //三级地址菜单
      .thirdAddress {
        width: 100%;
        margin: auto;
        border-top: 1px solid #cccccc;
        list-style: none;
        /*display: none;*/
        li {
          width: 90%;
          height: 5rem;
          line-height: 5rem;
          font-size: 1.6rem;
          text-align: left;
          //border: 1px solid;
          border-bottom: 1px solid #cccccc;
          margin: auto;
        }
      }
    }
  }
</style>
